<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>战队详情</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="css/ydui.css?rev=@@hash" />
    <link rel="stylesheet" href="css/demo.css" />
    <script src="js/ydui.flexible.js"></script>
    <style>
        .cell-left {
            width: 20%
        }
    </style>
</head>

<body>
    <section class="g-flexview" id="app" v-cloak>
        <sync-loader v-if="loading" :color="color"></sync-loader>
        <section class="g-scrollview" v-if="!loading">
            <div class="m-cell demo-small-pitch text_team_details">
                <div class="cell-item team_details_name">
                    <div class="cell-left" style="width:40%"><img :src="teampic" /></div>
                    <div class="cell-right" style="text-align:left; align-items:flex-start">
                        <div class="text_team">
                            <h3>{{details.teamName}}</h3>
                            <p class="Id">ID:{{details.teamNo}}</p>
                        </div>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">战队地址</div>
                    <div class="cell-right text_l" id="teamAdress">
                        {{details.placeProvince+details.placeCity+details.placeDistrict+details.placeLatitude}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">战队简介</div>
                    <div class="cell-right text_l teamReferral" id="teaminfo">
                        {{details.teamIntro}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">战队队长</div>
                    <div class="cell-right text_l">
                        <p class="name_t">{{details.captainAccount}}</p>
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">战队队员</div>
                    <div class="cell-right text_l">
                        {{details.memberNum}}
                    </div>
                </div>
                <div class="cell-item">
                    <div class="cell-left">创建时间</div>
                    <div class="cell-right text_l" id="creatTime">
                        {{details.createTime}}
                    </div>
                </div>

            </div>
            <div class="m-button">
                <button type="button" id="saveBtn" @click="applyJoin" v-if="this.userRole ==10" class="btn-block btn-primary">申请加入</button>
            </div>

        </section>

    </section>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.js"></script>
    <script src="js/vue-spinner-master/dist/vue-spinner.js"></script>
    <script src="js/layer/layer.js"></script>
</body>
<script>
    /* 获取头部信息 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return r[2];
        }
    };
    var SyncLoader = VueSpinner.SyncLoader
    var app = new Vue({
        el: '#app',
        components: {
            'SyncLoader': SyncLoader
        },
        data: {
            userRole: GetQueryString('userRole'),
            rowId: GetQueryString('rowId'),
            token: GetQueryString('token'),
            teamId: GetQueryString('teamId'),
            details: [],
            teampic: '',
            loading: true,
            color: '#FF6C00',
        },
        methods: {
            get: function() {
                this.$http({
                    method: "post",
                    url: "/appTeam/pubgTeamDetail",
                    data: {
                        token: this.token,
                        rowId: this.rowId,
                        userRole: this.userRole,
                    },
                    emulateJSON: true
                }).then(function(res) { // 访问成功后执行
                    console.log(res);
                    this.loading = false;
                    if (res.data.data == undefined) {
                        layer.msg('未找到数据');
                    };
                    this.details = res.data.data;
                    this.teampic = res.data.data.teamPhoto;
                }, function(error) { // 访问失败执行
                    console.log(error);
                    layer.msg('接口返回失败');
                    this.loading = false;
                })
            },
            applyJoin: function() {
                var token = this.token;
                var teamId = this.teamId;
                layer.confirm('<input  type="number" class="cell-input num_bor_s" id="addrgg" value="" placeholder="请输入邀请码" autocomplete="off" />', {
                    title: false, //不显示标题
                    btn: ['申请加入', '联系队长'] //按钮
                }, function() {
                    var inviteCode = $("#addrgg").val();
                    if (inviteCode >= 6) {
                        layer.msg("邀请码不能大于6位");
                        return;
                    };
                    /*调取接口加入*/
                    $.ajax({
                        url: "/appPubgUser/joinTeam",
                        type: "post",
                        data: {
                            token: token,
                            teamId: teamId,
                            inviteCode: inviteCode
                        },
                        dataType: "json",
                        success: function(res) {
                            if (res.code == '0') {
                                console.log(res);
                                layer.msg(res.message);
                                this.loading = false;
                                layer.msg('确认成功', {
                                    icon: 1
                                });
                                console.log(res);
                            } else {
                                layer.msg(res.message);
                            }
                        },
                        error: function() {
                            layer.msg('接口调取失败');
                        }
                    });
                }, function(){
                    layer.msg('请联系队长');
                });
            }
        },
        mounted: function() {
            this.$nextTick(function() {
                this.get();
            })
        }
    })
</script>

</html>